<template>
	<view class="order-page">
		<NavBar title="订单"/>
		<scroll-view scroll-x :show-scrollbar="false" class="order-type">
			<view
				class="type align-center justify-center"
				:class="typeId==item.type?'a-type':''"
				v-for="item in typeList"
				:key="item.title"
				@tap="tapType(item.type)"
			> {{ item.title }} </view>
		</scroll-view>
		<view class="order-list flex-column" v-if="orderList?.length">
			<OrderItem
				:orderInfo="item"
				:pageType="typeId"
				v-for="(item, index) in orderList"
				:key="item.supply_order_no"
				@editSuccess="editSuccess(index)"
			/>
		</view>
		<Empty v-else/>
	</view>
</template>

<script setup>
	import { ref, computed } from 'vue'
	import { onLoad, onReachBottom, onShow } from '@dcloudio/uni-app'
	import Empty from '@/components/Empty.vue';
	import NavBar from '@/components/NavBar.vue';
	import OrderItem from './components/OrderItem.vue';
	import { orderListApi } from '@/api'
	import { useUserStore } from '@/store'
	const userInfo = computed(() => useUserStore().userInfo)
	const orderType = computed(() => useUserStore().orderType)
	const typeList = ref([{type: userInfo.value.role_id=='13'?'0':'-1', title: '全部'}, ...orderType.value])
	const typeId = ref(0)
	const page = ref(1)
	const total = ref(0)
	const orderList = ref([])
	const tapType = (id) =>{
		if(typeId.value == id) return
		orderList.value = []
		typeId.value = id
		getOrderList()
	}
	const getOrderList = () =>{
		const { userInfo } = useUserStore()
		// 仓库 warea_house/index；供货商 supply/index
		let path = 'warea_house/index'
		let params = {
			type: typeId.value,
			page: page.value
		}
		if(userInfo.role_id == '13') {
			path = 'supply/index'
			params = {
				...params,
				uid: userInfo.uid,
				role_id: userInfo.role_id
			}
		}
		orderListApi(path, params).then(res => {
			if(res.data.length) {
				orderList.value.push(...res.data)
				total.value = res.total
			}
		}).catch(err => {
			console.log(err);
		})
	}
	const editSuccess = (i) => {
		orderList.value.splice(i, 1)
	}
	onLoad((e) => {
		typeId.value = e.type
	})
	onShow(() => {
		orderList.value = []
		getOrderList()
	})
	onReachBottom(() => {
		if(total.value <= page.value*12) return
		page.value = page.value + 1
		getOrderList()
	})
</script>

<style lang="scss" scoped>
	.order-page {
		padding: 20rpx 24rpx;
		padding-top: 100rpx;
		.order-type {
			background-color: #fff;
			position: fixed;
			white-space: nowrap;
			top: 44px;
			left: 0;
			right: 0;
			z-index: 100;
			.type {
				display: inline-block;
				height: 80rpx;
				line-height: 80rpx;
				position: relative;
				padding: 0 35rpx;
				&.a-type {
					&::before {
						display: block;
						content: '';
						position: absolute;
						left: 50%;
						bottom: 0;
						transform: translateX(-50%);
						width: 50%;
						height: 4rpx;
						background-color: #F57351;
					}
				}
			}
		}
		.order-list {
			gap: 20rpx;
		}
	}
</style>
